<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml11-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            /*display: inline;*/
        }
        ul{
            padding-left: 20px;
        }
        li > div > ul{
            display: none;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<script src="http://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<body>
<ul>
    <li th:each="menu : ${menus}">
        <div th:if="${#lists.isEmpty(menu.subs)}">
            <a th:text="${menu.title}" th:href="@{${menu.url}}"></a>
        </div>
        <div th:unless="${#lists.isEmpty(menu.subs)}">
            <span class="topMenu" th:text="${menu.title}"></span>
            <ul >
                <li th:each="sub : ${menu.subs}" >
                    <a th:text="${sub.title}" th:href="@{${sub.url}}"></a>
                </li>
            </ul>
        </div>
    </li>
</ul>
</body>
<script>
    $(".topMenu").click(function(){
        $(this).next().toggle();
    })
</script>
</html>